<template>
  <div style="width: 100%; height: 100%">
    <!-- 头部图片，根据选中活动项显示对应的icon，如果没有则显示默认图片 -->
    <image
      style="width: 100%"
      mode="widthFix"
      :src="
        selectedActivity && selectedActivity.icon
          ? imgurl + selectedActivity.icon
          : 'https://www.wantongkonggu.cn/crmebimage/profile/upload/2025/11/12/微信图片_20251112162826_39_31_20251112162902A019.jpg'
      "
    >
    </image>

    <div style="width: 100%; margin: 10px">
      <div style="padding: 10px; background-color: #fff; border-radius: 15px">
        <div style="margin: 0 0 10px 0; font-size: 22px; font-family: dymh; color: #007fff">{{ optionName }}</div>
        <div style="display: flex; flex-wrap: wrap">
          <div v-for="(item, index) in activityData" @click="isTrue = item.id" :class="isTrue == item.id ? 'fawdaw' : 'fawdawdaw'" style="margin: 3px 5px">
            {{ item.name }}
          </div>
        </div>

        <!-- 显示选中项的graphicInfo富文本内容或默认图片 -->
        <div v-if="selectedActivity && selectedActivity.graphicInfo" style="margin-top: 15px">
          <u-parse :content="selectedActivity.graphicInfo"></u-parse>
        </div>
        <div v-else style="margin-top: 15px; text-align: center">
          <image style="width: 100%" mode="widthFix" src="https://www.wantongkonggu.cn/crmebimage/profile/upload/2025/11/12/微信图片_20251112153503_36_31_20251112160611A007.jpg"></image>
          <image style="width: 100%" mode="widthFix" src="https://www.wantongkonggu.cn/crmebimage/profile/upload/2025/11/12/微信图片_20251112153504_37_31_20251112160838A008.jpg"> </image>
        </div>
      </div>
    </div>

    <div style="position: fixed; width: 100%; left: 0; bottom: 0; height: 75px; background: #fff; display: flex; align-items: center">
      <div style="font-size: 14px; width: 40%; padding-left: 30px" @click="dawdfaf">
        <u-icon name="phone" color="#06a9ff" size="50"></u-icon>
        客服电话
      </div>
      <button
        v-show="!faddaad"
        style="width: 45%; height: 40px; line-height: 40px; background: #06a9ff; text-align: center; color: #fff; border-radius: 10px; color: #fff"
        open-type="getPhoneNumber"
        @getphonenumber="getPhoneNumber"
      >
        立即预约
      </button>
      <div v-show="faddaad" @click="addOrder" style="width: 45%; height: 40px; line-height: 40px; background: #06a9ff; text-align: center; color: #fff; border-radius: 10px; color: #fff">
        立即预约
      </div>
    </div>
  </div>
</template>

<script>
import { clickActivityInfoByid, submitOrder, localLifePayment } from "../../utils/api/local.js";
import { programlogin, phoneAndPassword, getUserInfo, getUserPhoneNumber, newUserIntegral } from "../../utils/request_api.js";
import { userEdit } from "../../utils/api/local";
import { notBindingPhone } from "../../utils/api/api.js";
import { IMG_URL } from "../../config/index.js";

export default {
  data() {
    return {
      imgurl: IMG_URL,
      optionId: "",
      activityData: [],
      isTrue: "",
      faddaad: false,
      optionName: "",
      yaoiqngID: "",
      userType: "",
      authKey: "",
      openIdadw: "",
    };
  },
  computed: {
    // 计算属性，返回当前选中的活动项
    selectedActivity() {
      return this.activityData.find((item) => item.id === this.isTrue) || {};
    },
  },
  onLoad(option) {
    console.log(option);
    this.optionId = option.id;
    this.optionName = option.name;
    this.yaoiqngID = option.yaoiqngID;
    this.yaotype = option.type;
    this.getData();
    this.initUser();
  },
  // 发送给朋友
  onShareAppMessage(res) {
    // this.share.path = `/${view.route}`;
    this.share.path = "/pages_h5/householdServices/info?yaoiqngID=" + uni.getStorageSync("uid") + "&type=3&id=" + this.optionId + "&name=" + this.optionName;

    //转发参数
    return this.share;
  },
  //分享到朋友圈
  onShareTimeline(res) {
    // this.share.path = `/${view.route}`; //分享当前页面
    this.share.path = "/pages_h5/householdServices/info?yaoiqngID=" + uni.getStorageSync("uid") + "&type=3&id=" + this.optionId + "&name=" + this.optionName;
    //转发参数
    return this.share;
  },
  methods: {
    getPhoneNumber(e) {
      console.log("🚀 ~ e:", e);
      if (e.detail.code && e.detail.errMsg == "getPhoneNumber:ok") {
        getUserPhoneNumber(e.detail).then((res) => {
          if (res.code == 200 && res.data.errmsg == "ok") {
            let that = this;
            this.account = res.data.phone_info.phoneNumber;
            this.awdawgawdgrr();
          } else {
            console.log("🚀 ~ getPhoneNumber ~ res:", res);
            uni.showToast({
              title: res.message,
              icon: "none",
            });
          }
        });
      }
    },
    awdawgawdgrr() {
      var params = {
        avatar: this.userInfo.avatar,
        nickname: this.userInfo.nickname,
        phone: this.account,
        account: this.account,
      };
      userEdit(params).then((res) => {
        this.initUser();
      });
    },
    initUser() {
      uni.showLoading();
      getUserInfo()
        .then((res) => {
          if (res.code === 401) {
            this.showloginJs();
          } else {
            this.userInfo = res.data;
            if (res.data.phone) {
              this.faddaad = true;
            } else {
              this.faddaad = false;
            }
            uni.setStorageSync("userInfo", res.data);
            uni.hideLoading();
          }
        })
        .catch((err) => {
          console.error("获取用户信息失败", err);
          uni.hideLoading();
        });
    },
    showloginJs() {
      let that = this;
      uni.login({
        provider: "weixin",
        success: (res) => {
          if (res.code) {
            that.autoLogin(res.code);
          } else {
            uni.hideLoading();
            console.error("登录失败:", res.errMsg);
            uni.showToast({
              title: "微信登录失败，请稍后再试",
              icon: "none",
            });
          }
        },
        fail: (err) => {
          console.error("登录失败:", err);
          uni.showToast({
            title: "微信登录失败，请稍后再试",
            icon: "none",
          });
        },
      });
    },
    /* 免登录-每个界面调用 */
    async autoLogin(code) {
      let that = this;
      wx.getUserInfo({
        success(res) {
          const { nickName, avatarUrl, gender } = res.userInfo;
          programlogin({ code, avatar: avatarUrl, nickName, sex: gender }).then((response) => {
            const data = response.data;
            that.authKey = data.key;
            that.openIdadw = data.openId;
            if (data.type === "login") {
              uni.setStorageSync("uid", data.uid);
              uni.setStorageSync("token", data.token);
              uni.setStorageSync("userInfo_data", data);
              uni.setStorageSync("openID", data.key);
              that.initUser();
              uni.hideLoading();
            } else {
              that.initUserregister();
            }
          });
        },
        fail: () => {
          uni.showToast({
            title: "您需要授权，才能获取您的信息！",
          });
        },
      });
    },
    initUserregister() {
      var params = {
        key: this.authKey,
        type: "routine",
        openId: this.openIdadw,
        phone: "",
        password: "",
        captcha: "",
        codeOrPassword: "3",
        inviterLinkId: this.yaoiqngID ? this.yaoiqngID : "",
        inviteeType: this.userType,
      };
      notBindingPhone(params).then((res) => {
        uni.hideLoading();
        if (res.code == 200) {
          const data = res.data;
          uni.setStorageSync("uid", data.uid);
          uni.setStorageSync("token", data.token);
          uni.setStorageSync("userInfo_data", data);
          uni.setStorageSync("openID", this.authKey);
          this.initUser();
        }
      });
    },
    addOrder() {
      let params = {
        ebUserId: uni.getStorageSync("uid"),
        ebMerActivityTicketId: this.isTrue,
        ebMerActivityId: this.optionId,
        deductionPrice: 0,
        deductionType: 2,
        gainIntegral: 0.0,
        isChannel: 6,
        make: "",
        payPrice: 0,
        payType: "lszfxcx",
        proTotalPrice: 0,
        totalNum: 1,
        totalPrice: 0,
        useIntegralComunity: 0,
        useIntegralConsume: 0.0,
        ebComunityHouseId: 0,
        orderType: 2,
        shippingType: 2,
        realName: "",
        userPhone: "",
        userAddress: "",
        payWatercardInviteUserId: "",
        businessId: "",
        dealEbMerId: "1761701115809177",
        returnIntegral: 0,
        remark: "",
      };
      submitOrder(params).then((res) => {
        var pae = {
          uni: res.data.id,
          orderNo: res.data.orderId,
          payChannel: "public",
          payType: "lszfxcx",
          scene: 0, //下单时小程序的场景值
        };
        localLifePayment(pae).then((obj) => {
          if (obj.code == 200) {
            uni.showToast({
              icon: "none",
              title: "预约成功,等待客服回复！",
            });
            setTimeout(() => {
              uni.redirectTo({
                url: "/pages_h5/myCenter/components/local_life_order",
              });
            }, 1500);
          }
        });
      });
    },
    dawdfaf() {
      uni.makePhoneCall({
        phoneNumber: "15069531510",
      });
    },
    getData() {
      clickActivityInfoByid({ id: this.optionId }).then((res) => {
        this.activityData = res.data;
        console.log("🚀 ~     this.activityData :", this.activityData);
        if (this.activityData.length > 0) {
          this.isTrue = res.data[0].id;
        }
      });
    },
  },
};
</script>

<style>
page {
  width: 100%;
  height: 100%;
  background-color: #f5f5fb;
}
.fawdawdaw {
  padding: 3px 6px;
  border-radius: 3px;
  border: 1px solid #ededed;
}
.fawdaw {
  padding: 3px 6px;
  border-radius: 3px;
  border: 1px solid #15a9fc;
  color: #15a9fc;
  background-color: #e6f6ff;
}
</style>
